<template>
	<view class="dong_wapper">
		<view class="wapper_li">
			<view class="btn" v-for="(item,index) in li_head" :key="item" :class="{active: li==index}"
				@tap="changeli(index)">
				<text class="btn-text">{{item}}</text>
			</view>
		</view>
		<view class="container">
			<swiper class="swiper" @change="currentChoose" :current="li">
				<swiper-item class="swiper_IT">
					<view class="swiper-item"  v-for="(item,index) in newdata" :key="item.index">
						<scroll-view scroll-y="true" class="swiper_scroll" show-scrollbar>
							<view class="swiper_scroll_box" v-for="(item2,index) in item" :key="item2._id" >
								<view class="swiper_scroll_box_content">
									<view class="swiper_scroll_box_conten_head" @tap="goDetail()">{{item2.name}}<view
											class="t" v-if="item2.type">{{item2.type}}</view></view>
									<view class="swiper_scroll_box_content_num">
										<view class="swiper_scroll_box_content_num_l">
											<text class="swiper_scroll_box_content_num_l_t1">{{item2.rate}}</text>
											<text class="swiper_scroll_box_content_num_l_t2">\n每期反息收益率</text>
										</view>
										<view class="swiper_scroll_box_content_num_r">
											<text class="swiper_scroll_box_content_num_l_t3">{{item2.date}}</text>
											<text class="swiper_scroll_box_content_num_l_t4">\n{{item2.money}}元起</text>
										</view>
									</view>
								</view>
								
							</view>
							<view class="swiper_scroll_txt1"><text>没有找到合适的产品？去逛逛基金吧</text></view>
						</scroll-view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">60以内</view>
				</swiper-item><swiper-item>
					<view class="swiper-item">半年以内</view>
				</swiper-item><swiper-item>
					<view class="swiper-item">一年以上</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				li: 0,
				li_head: ["全部", "60天以内", "60天-1年", "1年以上"],
				interval_data: [{
						_id: 1,
						name: "振兴产品 · 振兴智慧存4号（12个月）",
						rate: "4.800%",
						date: "12个月",
						money: "100",
						num: 1,
						type: "限时福利"
					},
					{
						_id: 2,
						name: "振兴产品 · 振兴智慧存4号（12个月）",
						rate: "4.800%",
						date: "12个月",
						money: "100",
						num: 1,
						type: "长期优选"
					},
					{
						_id: 3,
						name: "振兴产品 · 振兴智慧存4号（12个月）",
						rate: "4.800%",
						date: "6个月",
						money: "100",
						num: 2,
						type: "灵活定制"
					},
					{
						_id: 4,
						name: "振兴产品 · 振兴智慧存4号（12个月）",
						rate: "4.800%",
						date: "300天",
						money: "100",
						num: 3,
						type: "长期优选"
					},
					{
						_id: 5,
						name: "振兴产品 · 振兴智慧存4号（12个月）",
						rate: "4.800%",
						date: "6个月",
						money: "100",
						num: 2,
						type: ""
					},
					{
						_id: 6,
						name: "振兴产品 · 振兴智慧存4号（12个月）",
						rate: "4.800%",
						date: "8~88天",
						money: "100",
						num: 4,
						type: ""
					},
					{
						_id: 7,
						name: "振兴产品 · 振兴智慧存4号（12个月）",
						rate: "4.800%",
						date: "12个月",
						money: "100",
						num: 1,
						type: "长期优选"
					},
					{
						_id: 8,
						name: "振兴产品 · 振兴智慧存4号（12个月）",
						rate: "4.800%",
						date: "8~88天",
						money: "100",
						num: 4,
						type: "银行定期"
					},
					{
						_id: 9,
						name: "振兴产品 · 振兴智慧存4号（12个月）",
						rate: "4.800%",
						date: "12个月",
						money: "100",
						num: 1,
						type: "长期优选"
					},
					{
						_id: 10,
						name: "振兴产品 · 振兴智慧存4号（12个月）",
						rate: "4.800%",
						date: "8~88天",
						money: "100",
						num: 4,
						type: "限时福利"
					}
				]

			}
		},
		computed:{
			newdata(){
				return[
					this.interval_data,
				 	this.interval_data.filter(item => item.num == 4),
					this.interval_data.filter(item => item.num == 4 || item.num == 2),
					this.interval_data.filter(item => item.num == 3)
				]
			}
		},
		methods: {
			changeli(index) {
				console.log(1)
				this.li = index
			},
			currentChoose(current) {
				console.log(current)
				this.li = current.detail.current
			},
			//一键购买
			goDetail(){
				uni.navigateTo({
					url:"/pagesA/t-fundDetail/t-fundDetail"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.dong_wapper {
		.wapper_li {
			box-sizing: border-box;
			padding: 10rpx 40rpx;
			display: flex;
			justify-content: space-between;
			width: 600rpx;

			.btn {
				height: 52rpx;
				line-height: 50rpx;
				color: #9a9a9a;
				border-radius: 12rpx;
				box-sizing: border-box;
				padding: 0rpx 20rpx;

				.btn-text {
					height: 34rpx;
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 24rpx;
					letter-spacing: 0rpx;

				}

			}

			.active {
				background-color: #007aff;
				color: #ffffff;
			}
		}
	}

	.container {
		.swiper {
			height: 100vh;
		

			.swiper_IT {
				height: 100%;

				.swiper-item {
					height: 100%;

					.swiper_scroll {
						height: 100%;
						.swiper_scroll_txt1{
								width: 320rpx;
								height: 28rpx;
								font-size: 20rpx;
								font-weight: normal;
								font-stretch: normal;
								line-height: 28rpx;
								letter-spacing: 0rpx;
								color: #9a9a9a;
								text-align: center;
								margin: 0 auto;
						}
						.swiper_scroll_box {
							box-sizing: border-box;
							padding: 40rpx;

							.swiper_scroll_box_content {
								// height: 300rpx;
								border-bottom: 1px solid #F0F0F0;
								padding-bottom: 20rpx;

								.swiper_scroll_box_conten_head {
									// width: 542rpx;
									height: 44rpx;
									font-size: 32rpx;
									font-weight: bold;
									font-stretch: normal;
									line-height: 44rpx;
									letter-spacing: 0rpx;
									color: #323232;
									display: flex;
									.t {
										text-align: center;
										width: 108rpx;
										height: 36rpx;
										line-height: 34rpx;
										border-radius: 18rpx;
										border: solid 2rpx #007aff;
										font-size: 20rpx;
										color: #007aff;
									}
								}

								.swiper_scroll_box_content_num {
									display: flex;
									justify-content: space-between;
									font-size: 24rpx;
									font-weight: normal;
									font-stretch: normal;
									line-height: 34rpx;
									letter-spacing: 0rpx;
									color: #9a9a9a;
									margin-top: 10rpx;
									width: 480rpx;


									.swiper_scroll_box_content_num_l {

										.swiper_scroll_box_content_num_l_t1 {
											width: 120rpx;
											height: 48rpx;
											font-size: 40rpx;
											color: #ff1d1d;
											
										}

										.swiper_scroll_box_content_num_l_t2 {
											width: 168rpx;
											height: 34rpx;
											font-family: PingFang SC;
											font-size: 24rpx;
											font-weight: normal;
											font-stretch: normal;
											line-height: 34rpx;
											letter-spacing: 0rpx;
											color: #9a9a9a;
										}
									}

									.swiper_scroll_box_content_num_r {
										.swiper_scroll_box_content_num_l_t3 {
											width: 104rpx;
											height: 44rpx;
											font-size: 32rpx;
											font-weight: normal;
											font-stretch: normal;
											line-height: 44rpx;
											letter-spacing: 0rpx;
											color: #2d2d2d;
										}

										.swiper_scroll_box_content_num_l_t4 {
											width: 168rpx;
											height: 34rpx;
											font-size: 24rpx;
											font-weight: normal;
											font-stretch: normal;
											line-height: 34rpx;
											letter-spacing: 0rpx;
											color: #9a9a9a;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
